<div
  id="conversationHistory"
  class="infoBox topLeftSession"
  cdkDrag>
  <div
    cdkDragHandle
    class="d-flex align-items-center justify-content-between handle">
    <h4 class=" mt-1">
      {{ conversationDetail.from.display_name }}
      <em class="fas fa-long-arrow-alt-right text-info"></em>
      {{ conversationDetail.to.display_name }}
    </h4>
    <button
      id="closeBlackList"
      aria-label="Close icon button"
      class="d-flex align-items-center justify-content-center"
      mat-icon-button>
      <i (click)="popupState.leave()" class="eos-icons">close</i>
    </button>
  </div>
  <hr class="fancy mx-0 my-0" />
  <div
    *ngIf="conversationDetail.entries && conversationDetail.entries.length > 4"
    class="d-flex flex-row justify-content-between align-items-center">
    <span
      *ngIf="
        conversationDetail.entries && conversationDetail.entries.length > 0
      "
      class="mr-2"
      >{{ 'network.edgeDetails.SESSIONS' | translate }}
      {{ conversationDetail.sessions }}</span
    >
    <mat-label class="text-warning" *ngIf="onViolation"
      ><em class="fa fa-ban mr-1"></em>
      {{ 'network.edgeDetails.VIOLATION' | translate }}
    </mat-label>
    <mat-label class="text-danger" *ngIf="onThreat"
      ><em class="fas fa-bug mr-1"></em>
      {{ 'network.edgeDetails.THREAT' | translate }}
    </mat-label>
    <app-quick-filter [gridOptions]="gridOptions" [showCount]="false">
    </app-quick-filter>
  </div>
  <ag-grid-angular
    id="conversationHis-grid"
    class="ag-theme-alpine"
    style="width: 100%; margin-top: 10px"
    [ngStyle]="{ height: entriesGridHeight + 'px' }"
    [rowData]="conversationDetail.entries"
    [gridOptions]="gridOptions">
  </ag-grid-angular>

  <div
    *ngIf="
      !conversationDetail.entries || conversationDetail.entries.length === 0
    "
    class="pv-lg">
    <div class="text-info" style="font-size: 16px">
      <em class="fa fa-info-circle mr-2" aria-hidden="true"></em>
      {{ 'general.NO_CONVERSATIONS' | translate }}
    </div>
  </div>
  <div class="d-flex flex-row justify-content-end my-3">
    <button
      *ngIf="showRuleId && traffic && traffic.policy_action !== 'open'"
      [disabled]="!isWriteNetworkAuthorized"
      mat-raised-button
      color="primary"
      aria-label="review rule"
      (click)="overrideRule(traffic, edgeDetails)"
      class="mt-1 mr-1">
      <em class="far fa-edit mr-1"></em>
      {{ 'network.edgeDetails.OVERRIDE_RULE' | translate }}
    </button>
    <button
      mat-stroked-button
      color="primary"
      class="mt-1"
      aria-label="clear sessions"
      (click)="
        clearSessions(conversationDetail.from.id, conversationDetail.to.id)
      "
      [disabled]="!isWriteNetworkAuthorized"
      *ngIf="
        conversationDetail.entries && conversationDetail.entries.length > 0
      ">
      <em class="fa fa-magic mr-1"></em
      >{{ 'network.edgeDetails.CLEAR' | translate }}
    </button>
  </div>

  <div *ngIf="onRule" class="col-sm-12">
    <h4 *ngIf="rule.id !== 0">
      {{ 'policy.RULE_DETAILS' | translate }}
      <em class="far fa-hand-point-right mx-1 text-primary"></em>
      <small class="text-muted mr-4">{{ rule.id }}</small>
      <div
        *ngIf="rule.learned"
        class="action-label px-1 learn-rule"
        translate="{{ 'group.LEARNED' }}"></div>
      <div
        *ngIf="!rule.learned"
        class="action-label px-1 customer-rule"
        translate="{{ 'group.CUSTOM' }}"></div>
    </h4>
    <h4 *ngIf="rule.id === 0">
      {{ 'policy.NEW_RULE' | translate }}
      <em class="far fa-plus-square mx-1 text-primary"></em>
    </h4>
    <div>
      <form name="ruleForm" >
        <div class="d-flex justify-content-between align-items-center">
          <div class="full-width mr-2">
            <mat-form-field appearance="fill" class="full-width">
                <mat-label>{{ 'policy.editPolicy.FROM' | translate }}</mat-label>
                <input
                  matInput
                  value="{{ rule.from }}"
                  disabled
                  aria-label="From" />
              </mat-form-field>
          </div>
          <div class="full-width mr-2">
            <mat-form-field appearance="fill" class="full-width">
            <mat-label>{{ 'policy.editPolicy.TO' | translate }}</mat-label>
            <input matInput value="{{ rule.to }}" disabled aria-label="To" />
            </mat-form-field>
          </div>
          <div class="full-width ">
            <mat-form-field appearance="fill" class="full-width">
              <mat-label>{{ 'policy.addPolicy.APP' | translate }}</mat-label>
              <input
                matInput
                disabled
                value="{{ rule.applications.join(', ') }}"
                aria-label="Applications" />
            </mat-form-field>
          </div>
        </div>
        <div class="d-flex justify-content-between align-items-center">
          <div class="full-width mr-2">
            <mat-form-field appearance="fill" class="full-width">
            <mat-label>{{ 'policy.editPolicy.PORT' | translate }}</mat-label>
            <input
              matInput
              disabled
              value="{{ rule.ports }}"
              aria-label="Port" />
            </mat-form-field>
          </div>
          <div class="full-width mr-2" >
            <ng-container *ngIf="rule.created_timestamp">
              <mat-form-field appearance="fill" class="full-width">
                <mat-label>{{ 'controllers.detail.CREATED_AT' | translate }}</mat-label>
                <input
                  matInput
                  disabled
                  aria-label="Created date"
                  value="{{
                rule.created_timestamp * 1000 | date: 'MMM dd, y HH:mm:ss'
              }}" />
              </mat-form-field>
            </ng-container>
          </div>
          <div class="full-width">
            <div>
              <mat-slide-toggle
                class="example-margin"
                color="primary"
                name="toggleAction"
                [(ngModel)]="rule.allowed"
                [disabled]="
                  !isWriteNetworkAuthorized || rule.action === 'open'
                ">
                <span
                  [ngClass]="{ 'text-danger': !rule.allowed, 'text-success': rule.allowed }"
                >
                  {{(rule.allowed ? "enum.ALLOW" : "enum.DENY") | translate}}
                </span>
              </mat-slide-toggle>
            </div>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col">
            <div class="pull-right">
              <button
                mat-button
                *ngIf="isWriteNetworkAuthorized"
                aria-label="close rule"
                color="primary"
                class="mt-1"
                (click)="closeRuleDetail()">
                <em class="far fa-window-close mr-1"></em
                >{{ 'policy.portlet.CLOSE' | translate }}
              </button>
              <button
                mat-raised-button
                *ngIf="isWriteNetworkAuthorized"
                class="mt-1 mr-2"
                color="primary"
                aria-label="Deploy rule"
                (click)="updateRule(rule)">
                <em class="fa fa-save mr-2"></em
                >{{ 'policy.portlet.SUBMIT' | translate }}
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
